<template>
	<view class="content">
		<view class="order_ul">
			<view class="order_ul_li" v-for="(item,index) in order" :key="index">
				<view class="order_top">
					<text>{{item.num}}</text>
					<text class="color_gray" :style="{color:item.state=='已接单'||item.state=='提交成功'?'#ff5d76':''}">{{item.state}}</text>
				</view>
				<view class="order_middle"  @tap="orderDeil" :data-id="index">
					<view class="order_middle_title">
						<text>碎屏</text>
						<text>iphone6</text>
						<text>换耳机</text>
					</view>
					<text>上门维修</text>
				</view>
				<view class="order_bottom" v-if="item.state=='已完成'">
					<view class="order_bottom_L">
						<text>应付金额:￥300.00</text>
						<button>去支付</button>
					</view>
					<button class="evaluation_button" @tap="evaluation">评价</button>
				</view>
				<view class="order_bottom" v-if="item.state=='已取消'">
					<view class="order_bottom_L">
						<text>应付金额:￥300.00</text>
						<!-- <button>去支付</button> -->
					</view>
					<button class="evaluation_button" @tap="appointment">重新下单</button>
				</view>
				<view class="order_bottom" v-if="item.state=='已接单'">
					<view class="order_bottom_L">
						<text>应付金额:￥300.00</text>
						<!-- <button>去支付</button> -->
					</view>
					<button class="evaluation_button" @tap="dialPhone">联系师傅</button>
				</view>
				<view class="order_bottom" v-if="item.state=='提交成功'">
					<view class="order_bottom_L">
						<text>应付金额:￥300.00</text>
						<!-- <button>去支付</button> -->
					</view>
					<button class="evaluation_button" @tap="orderDeil">查看订单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order:[
					{
						num:'125454',
						state:'已完成'
					},
					{
						num:'125454',
						state:'已取消'
					},
					{
						num:'125454',
						state:'已接单'
					},
					{
						num:'125454',
						state:'提交成功'
					},
					
				]
			};
		},
		methods:{
			orderDeil(evt){
				var id = evt.currentTarget.dataset.id;
				uni.navigateTo({
					url:'../orderDeil/orderDeil?id=' + id
				})
			},
			//我的评价
			evaluation(){
				uni.navigateTo({
					url:'../evaluation/evaluation'
				})
			},
			dialPhone(){
				uni.makePhoneCall({
					phoneNumber: '18235461258' 
				});
			},
			appointment(){
				uni.navigateTo({
					url:'../appointment/appointment'
				})
			}
		}
	}
</script>

<style>
.content{
	box-sizing: border-box;
	box-shadow: 0 8px 10px -8px #eee inset;
	border-top: 1px solid #eee;
}
.order_top{
	display: flex;
	justify-content: space-between;
	line-height: 80upx;
	border-bottom: 1px solid #eee;
}
.color_gray{
	color: #a4a8b4;
}
.order_middle{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 30upx;
	border-bottom: 1px solid #eee;
	padding: 30upx 0;
}
.order_middle_title{
	font-size: 32upx;
	font-weight: 600;
	color: #41434b;
	width: 350upx;
}
.order_middle_title text{
	display: inline-block;
	padding-right: 20upx;
	line-height:50upx;
}
.order_bottom{
	display: flex;
	justify-content: space-between;
	line-height: 100upx;
	align-items:center;

}
.order_bottom button{
	font-size: 30upx;
	padding: 0 30upx;
	margin: 0 0 0 20upx;
	line-height:50upx;
	height: 50upx;
	border: 1px solid #5a70fb;
	color: #5a70fb;
	font-size: 24upx;
	background: #fff;
	border-radius: 50upx;
}
.order_bottom_L{
	display: flex;
	align-items:center;
	color: #a4a8b4;
}
.order_bottom .evaluation_button{
	border: 1px solid #41434b!important;
	color: #41434b!important;
	/* width: 130upx; */
}
.order_ul_li{
	border-bottom: 20upx solid #ebedf5;
	padding: 0 40upx;
	box-sizing: border-box;
}
</style>
